<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
    <div class="bbs">
        <header><span>我要发帖</span></header>
        <section>
            <ul id="postList">
                <!--  <li><div><img src="images/tou04.jpg"></div><h1>333</h1><p><span>版块：电子书籍</span><span>发表时间：2020-11-5 12:6</span></p></li> -->
            </ul>
        </section>
        <div class="post" id="post">
            <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
            所属版块：<select id="sec">
                <option value="-1">请选择版块</option>
                <option value="2">电子书籍</option>
                <option value="3">新课来了</option>
                <option value="4">新手报到</option>
                <option value="5">职业规划</option>
            </select>
            <textarea class="content" id="content"></textarea>
            <input class="btn" value="发布">
        </div>
    </div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script>
    var names = ['张三', '李四', '王五', '赵六'];
    var avatars = ['tou01.jpg', 'tou01.jpg', 'tou01.jpg', 'tou01.jpg'];
    var index = Math.floor(Math.random() * names.length);

    $('header span').on('click', function () {
        $('#post').css('display', 'block');
    })

    $('.btn').on('click', function () {
        var date = new Date();
        var title = $('.title').val();
        var content = $('#content').text();
        var sec = $('#sec option:selected').text();
        console.log(sec)
        var html = `<li><div><img src="images/${avatars[index]}"></div>
               <h1>${title}</h1><p>${content}</p>
                 <p><span>版块：${sec}</span><span>发表时间：${date}</span></p></li>`

        $('#postList').prepend(html);
        $('#post').css('display', 'none');
        $('.title').val('');
        $('#content').text('');
        $('#sec').val(-1);
    })
</script>
</body>
</html>